<template>
    <div class="comments">
        <h1 class="publish">发表评论</h1>
        <textarea class="comments-body" name="" id="" placeholder="请输入要发表的内容" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表</mt-button>
        <div class="cmt-list" v-for="(item ,i) in comments" :key="item.add_time">
            <div class="cmt-item">
                <div class="cmt-title">
                    <span>第{{ i+1 }}楼&nbsp;&nbsp;&nbsp;用户: {{ item.user_name}}</span>
                    <span>发表时间: {{ item.add_time | dataFormat}}</span>
                </div>
                <div class="cmt-body">{{ item.title === 'undefind'? '此用户很懒，忘了说点什么':item.title}}</div>
            </div>
        </div>
       
        <mt-button class="loadMore" type="danger" size="normal" @click="loaderMore">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from "mint-ui"
    export default{
        data(){
            return {
                listIndex: 5,//默认展示前5条评论
                listStart: 0,//展示的起始位置--表示从第一条数据开始
                comments: [],//用来存放评论数据
                commentsNum: null,//用来存放数据的总数目
                 id: this.$route.params.id,//将id挂载到data上，方便调用
                 msg: ''//评论输入的内容
            }
        },
        created(){
            this.getComments()
        },
        
        methods:{
            getComments(){//获取评论数据
                this.$http.get('../../api/newsdetails.json').then(result =>{
                    if(result.body.status === 0){
                        //concat()方法表示将新数组添加到当前已有的数组当中
                        var listNewsComments=result.body.message[this.id-1].comments//获取当前新闻对应的评论
                        this.comments=this.comments.concat(listNewsComments.message.slice(this.listStart,this.listIndex))
                        this.listStart=this.listIndex//让起始位置为上一次的终点位置
                        this.commentsNum=result.body.message.length
                        
                    }else{
                        Toast("评论加载失败")
                    }
                })
            },
        loaderMore(){
            this.listIndex+=5
            // console.log(this.listIndex)
            this.getComments()
            if(this.listIndex>this.commentsNum){
                Toast("没有更多评论了")
                this.listIndex=this.commentsNum//让展示的评论数目等于评论数据的总数目
            }
        },
        postComment(){//发表评论
        //校验是否为空内容
        
        if(this.msg.trim().length === 0 ){
            Toast("评论的内容不能为空")
            return
        }
            //发表评论
            //参数1. 请求的URl 地址
            //参数2. 提交给服务器的数据对象 { content : this.msg }
            //参数3. 定义提交的时候，表单中数据的格式 { emulateJson: true }
            //trim()去除字符串两边的空格
            // this.$http.post("../../api/newsdetails.json",{content: this.msg.trim()})
            // .then(function(result){
            //     if(result.body.status === 0){
            //         //1.拼接出一个评论对象
            //         var cmt={
            //             title: "",
            //             user_name: "匿名用户",
            //             add_time: Date.now(),
            //             content: this.msg.trim()
            //         }
            //         this.comments.unshift(cmt)
            //         this.msg=""
            //     }else{
            //         Toast("评论失败")
            //     }
            // })

            this.$http.get('../../api/newsdetails.json').then(result=>{
                if(result.body.status === 0){
                    //获取数据，将msg中的内容添加到数据中
                    //1.拼接出一个评论对象
                    var cmt={
                        title: this.msg,
                        user_name: "匿名用户",
                        add_time: Date.now(),
                        content: this.msg.trim()
                    }
                    this.comments.unshift(cmt)
                    this.msg=""
                    
                    //console.log(result.body.message[this.id-1].comments.message)
                }else{
                   Toast("评论失败") 
                }
            })
        }
        }
    }
</script>
<style lang="less" scoped>
.comments{padding: 0 5px;}
.publish{font-size: 16px;padding: 10px 0;border-bottom: 1px solid #cccccc;}
.comments-body{
    font-size: 12px;
    width: 100%;
    height: 80px;
    border: 1px solid #cccccc;
    text-indent: 2em;
    padding: 5px 5px;
}
.cmt-title{font-size: 12px;color: #383737;display: flex;justify-content: space-between;padding: 5px 3px;
background-color: #cccccc;}
.cmt-body{
    font-size: 13px;
    color: #000000;
    text-indent: 2em;
    padding: 0 10px;
    height: 40px;
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
     -webkit-line-clamp: 2;
     display: -webkit-box;
	-webkit-box-orient: vertical;
  }
  .cmt-list{
      margin: 5px auto;
  }
  .loadMore{
      height: 25px;
      line-height: 16px;
      font-size: 12px;
      margin: 5px;
  }
</style>


